<template>
    <h1>{{ title }}</h1>
    <Teleport to="body"><span>body</span></Teleport>
</template>

<script setup lang="ts">
import { onBeforeRouteLeave, onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import { ref, getCurrentInstance } from "vue";

import { useTitle } from "./mixin";
const { title } = useTitle();

console.log(title);

const { proxy } = getCurrentInstance() as any;

console.log("Current instance proxy:", proxy.getTime());

onBeforeRouteUpdate((to, from, next) => {
    console.log("Updating useMixin page", { to, from });
    // 可以在这里进行一些更新工作
    next();
});

onBeforeRouteLeave((to, from, next) => {
    console.log("Leaving useMixin page", { to, from });
    // 可以在这里进行一些清理工作
    next();
});
</script>

<style scoped></style>
